<template>
  <div>
    <h2>用户信息完善页面</h2>
    <table class="table table-bordered">
      <tr>
        <td>真实姓名:</td>
        <td>
          <input type="text" v-model="userInfoData.U_Name">
        </td>
      </tr>

      <tr>
        <td>身份证号码:</td>
        <td>
          <input type="text" v-model="userInfoData.U_IdCard" maxlength="18">
        </td>
      </tr>
      
      <tr>
        <td>用户类型:</td>
        <td>
          <select v-model="userInfoData.UT_Id">
            <option value="0">==请选择==</option>
            <option v-for="item in userType" :value="item.UT_Id">
              {{ item.UT_Name }}
            </option>
          </select>
        </td>
      </tr>

      <tr>
        <td>联系方式:</td>
        <td>
          <input type="text" v-model="userInfoData.U_Phone" maxlength="11">
        </td>
      </tr>

      <tr>
        <td>出生日期:</td>
        <td>
          <input type="date" v-model="userInfoData.U_Date">
        </td>
      </tr>

      <tr>
        <td>性别:</td>
        <td>
          <input type="radio" v-model="userInfoData.U_Sex" name="男" :value="true">男
          <input type="radio" v-model="userInfoData.U_Sex" name="女" :value="false">女
        </td>
      </tr>

      <tr>
        <td>年收入:</td>
        <td>
          <input type="text" v-model="userInfoData.U_Income">
        </td>
      </tr>

      <tr>
        <td></td>
        <td>
          <input type="button" value="保存" @click="saveData" class="btn btn-success">&nbsp;
          <input type="button" value="返回" @click="router.push('/user/login')" class="btn btn-info">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import {reactive,toRefs,onMounted} from 'vue'

import { useRouter,useRoute } from 'vue-router';

let route = useRoute()
let router = useRouter()

//数据
let data:any = reactive({
  userType:[],
  userInfoData:{
    U_Name:'',
    U_Phone:'',
    U_Date:'',
    U_Sex:'',
    U_Income:'',
    U_IdCard:'',
    UT_Id:0,
    UL_Id:route.query.UL_Id
  }
})

//解构
let {userType,userInfoData} = toRefs(data)

//页面加载时 加载用户类型下拉框
//页面加载时 加载用户信息
onMounted(()=>{
  getUserType()
})


//获取用户类型下拉框
const getUserType = ()=>{
  axios({
    url:'/api/User/GerUserType',
    method:'get'
  }).then(res=>{
    console.log(res.data)
    userType.value= res.data.data
  }).catch(err=>{
    console.log(err)
  })
}

//保存
const saveData =()=>{
  //非空判断
  if(userInfoData.value.U_Name==""){
    return alert("真实姓名不能为空")
  }
  if(userInfoData.value.U_IdCard==""){
    return alert('身份证号不能为空')
  }
  //身份证号正则
  let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if(reg.test(userInfoData.value.U_IdCard) == false){
    return alert('身份证号格式不正确')
  }
  if(userInfoData.value.UT_Id==0){
    return alert('用户类型必选')
  }
  //联系方式正则
  if(userInfoData.value.U_Phone==""){
    return alert('联系方式不能为空')
  }

  //手机号正则
  let regs = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
  if(regs.test(userInfoData.value.U_Phone) == false){
    return alert('手机号格式不正确')
  }
  if(userInfoData.value.U_Date==""){
    return alert('出生日期不能为空')
  }
  if(userInfoData.value.U_Income==""){
    return alert('年收入不能为空')
  }
  //年收入正则
  if(isNaN(userInfoData.value.U_Income)==true){
    return alert('年收入必须为数字')
  }
  //年收入不能小于10000
  if(userInfoData.value.U_Income<10000){
    return alert('年收入不能小于10000')
  }

  console.log(userInfoData.value);
  
  //发送请求
  axios({
    url:'/api/User/PostAddUserInfoById',
    method:'post',
    data:userInfoData.value
  }).then(res=>{
    console.log(res.data)
    console.log(userInfoData.value);
    //判断
    if(res.data.data==1){
      alert('信息完善成功')
      router.push('/main')
    }else{
      return alert('信息完善失败')
    }
  }).catch(err=>{
    console.log(err)
  })
}

</script>

<style scoped>

</style>